<!DOCTYPE html>
<html>

<head>
    <title>六边形示例</title>
    <style>
        .hexagon {
            width: 100px;
            height: 55px;
            position: relative;
            display: inline-block;
        }
        
        .hexagon:before,
        .hexagon:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
        
        .hexagon:before {
            border-bottom: 27.5px solid #666;
        }
        
        .hexagon:after {
            top: 27.5px;
            border-top: 27.5px solid #666;
        }
    </style>
</head>

<body>
    <div class="hexagon"></div>
</body>

</html>